<template>
	<div>
		<div class="summary">
			<div class="confirm">
				<div class="tip" v-if="today">较昨日<span class="small-number">+{{today.confirmedIncr}}</span></div>
				<div class="number">{{total.confirmedCount}}</div>
				<div class="tag"><span>确诊人数</span></div>
			</div>
			<div class="suspect">
				<div class="tip" v-if="today">较昨日<span class="small-number">+{{today.suspectedIncr}}</span></div>
				<div class="number">{{total.suspectedCount}}</div>
				<div class="tag"><span>境外输入</span></div>
			</div>
			<div class="heal">
				<div class="tip" v-if="today">较昨日<span class="small-number">+{{today.curedIncr}}</span></div>
				<div class="number">{{total.curedCount}}</div>
				<div class="tag"><span>治愈人数</span></div>
			</div>
			<div class="dead">
				<div class="tip" v-if="today">较昨日<span class="small-number">+{{today.deadIncr}}</span></div>
				<div class="number">{{total.deadCount}}</div>
				<div class="tag"><span>死亡人数</span></div>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		props: {
			total: Object,
			today: Object
		}
	}
</script>

<style>
	.summary {
		display: flex;
		padding: 0 20px;
		justify-content: space-between;
	}

	.summary .number {
		font-size: 24px;
		font-weight: bold;
		padding: 8px 5px 5px 5px;
	}

	.summary .small-number {
		font-size: 12px;
	}

	.summary .tag {
		height: 35px;
		line-height: 35px;
		font-size: 12px;
		font-weight: bold;
	}

	.summary .tip {
		font-size: 12px;
		padding-top: 10px;
		color: #8b8989;
	}

	.summary .confirm {
		background-color: #fdf1f1;
		border-radius: 8px 0 0 8px;
		margin-right: 2px;
	}

	.summary .confirm .tag {
		background-color: #ffe0e0;
	}

	.summary .confirm .number,
	.summary .confirm .small-number {
		color: #d81d1b;
	}

	.summary .suspect {
		background-color: #fff7ed;
		margin-right: 2px;
	}

	.summary .suspect .tag {
		background-color: #ffeed9;
	}

	.summary .suspect .number,
	.summary .suspect .small-number {
		color: #f7ab1a;
	}

	.summary .heal {
		background-color: #f1f8f4;
		margin-right: 2px;
	}

	.summary .heal .tag {
		background-color: #dfeee6;
	}

	.summary .heal .number,
	.summary .heal .small-number {
		color: #178b50;
	}

	.summary .dead {
		background-color: #f8f8f8;
		border-radius: 0 8px 8px 0;
	}

	.summary .dead .tag {
		background-color: #eee;
	}

	.summary .dead .number,
	.summary .dead .small-number {
		color: #66666c;
	}

	.summary>div {
		flex: 1;
		text-align: center;
		overflow: hidden;
	}
</style>
